import React from 'react';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import Action from '../store/actions';
import {Link} from 'react-router'
import {Container, TabBar} from 'amazeui-touch';

@connect(
    state => ({...state}),
    dispatch => bindActionCreators(Action, dispatch)
)
export default class MainLayout extends React.Component {
    static contextTypes = {
        router: React.PropTypes.object.isRequired
    };

    constructor() {
        super();
    }

    render() {
        const {router} = this.context;
        return (
            <Container direction="column" id="sk-container">
                <Container>
                    {React.cloneElement(this.props.children, {key: this.props.location.key})}
                </Container>
                <div id="tabBar">
                    <TabBar
                        amStyle="primary"
                    >
                        <TabBar.Item
                            component={Link}
                            icon="home"
                            title="首页"
                            selected={router.isActive('/', true)}
                            to="/"
                            onlyActiveOnIndex
                        />
                        <TabBar.Item
                            component={Link}
                            icon="pages"
                            title="购物车"
                            selected={router.isActive('/shop', true)}
                            to="/shop"
                            onlyActiveOnIndex
                        />
                        <TabBar.Item
                            component={Link}
                            icon="person"
                            title="我的"
                            selected={router.isActive('/person', true)}
                            to="/person"
                            onlyActiveOnIndex
                        />
                    </TabBar>
                </div>
            </Container>
        )
    }
};